<template>
	<div class='tabbar'>
		
		<ul>
			<li 
				v-for='(item,index) in routerList' 
				:key='index'
				@click='switchTab(item.path)'
			>
				<img :src=" $route.path.includes(item.path)  ?  item.selected : item.active  " alt="">
				<span :class=' $route.path.includes(item.path)  ?  "text-actions " : ""  '>{{item.title}}</span>
			</li>
		</ul>
		
	</div>
</template>

<script>
export default {
	name:"Tabbar",
	data () {
		return {
			routerList:[
				{
					title:'首页',
					path:'/home',
					active:"./img/home.png",
					selected:'./img/home-selected.png'
				},
				{
					title:'分类',
					path:'/list',
					active:"./img/list.png",
					selected:'./img/list-selected.png'
				},
				{
					title:'购物车',
					path:'/cart',
					active:"./img/cart.png",
					selected:'./img/cart-selected.png'
				},
				{
					title:'我的',
					path:'/my',
					active:"./img/my.png",
					selected:'./img/my-selected.png'
				}
				
			]
		}
	},
	methods:{
		switchTab(  path ){
				console.log( this.$route );
			if( this.$route.path  == path ) return false;
			this.$router.push( path );
		}
	}
}
</script>

<style scoped lang='scss'>
.text-actions{
	color:red;
}
.tabbar{
	position: fixed;
	bottom:0;
	left:0;
	width: 100%;
	height: 1.65rem;
	background-color: #fff;
	border-top:1px solid #ccc;
	ul{
		display: flex;
		justify-content: space-around;
		height: 1.65rem;
		li{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			img{
				width: 0.9375rem;
				height: 0.9375rem;
			}
			span{
				font-size:0.333333rem;
			}
		}
	}
}
	
</style>
